<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麦子厨房多功能三明治早餐机SW-005</title>
    <link rel="stylesheet" href="css/resest.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="icon" type="images/x-ico" href="images/favicon.ico">
    <link rel="stylesheet" href="css/detailPage.css">
</head>

<body>
    <header></header>
    <section>
        <div class="d-center">
            <hr>
            <div class="goods-top">
                <a href="">首页</a>
                <span class="iconfont icon-xiangyoujiantou"></span>
                <a href="">严选好物</a>
                <span class="iconfont icon-xiangyoujiantou"></span>
                <a href="">生活家电</a>
                <span class="iconfont icon-xiangyoujiantou"></span>
                <i> 麦子厨房多功能三明治早餐机SW-005</i>
            </div>
            <div class="goods-end">
                <div class="d-magnifyingGlass">
                    <div class="slide">
                        <div class="mg-img">
                            <img src="images/g-01.jpg" alt="">
                            <div class="mg-big">

                            </div>
                            <div class="mg-mask">

                            </div>
                        </div>
                        <ul class="mg-list">
                            <li><img src="images/g-01.jpg" alt=""></li>
                            <li><img src="images/g-01-01.jpg" alt=""></li>
                            <li><img src="images/g-01-02.jpg" alt=""></li>
                            <li><img src="images/g-01-03.jpg" alt=""></li>
                            <li><img src="images/g-01-04.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="info">
                        <h2>麦子厨房多功能三明治早餐机SW-005</h2>
                        <div class="in-price ">
                            <div class="price-top">
                                <span>本店价</span>
                                <b>￥ 219.00 </b>
                                <i>￥ 531.00</i>
                            </div>
                            <div class="price-end">
                                <span>服务</span>
                                <b>可使用0积分</b>
                            </div>
                        </div>
                        <div class="in-colour">
                            <span>颜色</span>
                            <img src="images/g-01-05.jpg" alt="" title="森林绿">
                            <img src="images/g-01-06.jpg" alt="" title="淡雅米">
                            <img src="images/g-01-07.jpg" alt="" title="浪漫粉">
                        </div>
                        <div class="in-num">
                            <span>数量</span>
                            <input type="button" value="-" class="btn"><input type="text" value="0"><input type="button"
                                value="+" class="btn">
                            <i>(9999件)</i>
                        </div>
                        <div class="in-buy">
                            <button>立即购买</button>
                            <button>加入购物车</button>
                            <button>收藏</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-specification">
            <div class="d-sp-left">
                <div class="le-hd">
                    <div>详情</div>
                    <div>评价 <span>(0)</span></div>
                </div>
                <div class="le-content">
                    <div class="con-hd">
                        <ul>
                            <li>
                                <p>产品品牌</p>
                                <p>麦子厨房</p>
                            </li>
                            <li>
                                <p>商品货号</p>
                                <p>ECS000554</p>
                            </li>
                        </ul>
                    </div>
                    <div class="con-img">
                        <img src="images/g-02-01.jpg" alt="">
                        <img src="images/g-02-02.jpg" alt="">
                        <img src="images/g-02-03.jpg" alt="">
                        <img src="images/g-02-04.jpg" alt="">
                        <img src="images/g-02-05.jpg" alt="">
                        <img src="images/g-02-06.jpg" alt="">
                        <img src="images/g-02-07.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="d-sp-right">
                <h3>精品推荐</h3>
                <ul>
                    <li><img src="images/1-5.jpg" alt="">
                        <a href="">每食酷手工网红萝卜干238克*2瓶装
                        </a>
                        <p> ￥ 39.90</p>
                    </li>
                    <li><img src="images/1-5-0.jpg" alt="">
                        <a href="">唱吧小巨蛋麦克风Q3

                        </a>
                        <p> ￥499.00</p>
                    </li>
                    <li><img src="images/1-5-1.jpg" alt="">
                        <a href="">3D立体纯手绘动物杯

                        </a>
                        <p> ￥ 59.00</p>
                    </li>
                    <li><img src="images/1-5-2.jpg" alt="">
                        <a href="">摩飞刀具砧板消毒器MR1000

                        </a>
                        <p> ￥ 398.00</p>
                    </li>
                    <li><img src="images/1-5-3.jpg" alt="">
                        <a href="">生活元素电热饭盒F27

                        </a>
                        <p> ￥199.00</p>
                    </li>
                </ul>
            </div>

        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
    function Magnifier() {
        this.eventBind = function () {
            this.mouseover();
            this.move();
            this.out();
            this.click();
        }
        //移动光罩
        this.mouseover = function () {
            $(".mg-img").on("mousemove", function (e) {
                //e.pageX  大图片距离左侧的宽度
                var left = e.pageX - $(this).offset().left - $(".mg-mask").width() / 2;
                var right = e.pageY - $(this).offset().top - $(".mg-mask").height() / 2;
                if (left < 0) {
                    left = 0;
                }
                if (right < 0) {
                    right = 0;
                }
                let maxLeft = $(this).width() - $(".mg-mask").width();
                let maxTop = $(this).height() - $(".mg-mask").height();
                if (left > maxLeft) {
                    left = maxLeft;
                }
                if (right > maxTop) {
                    right = maxTop;
                }
                $(".mg-mask").css({
                    left: left,
                    top: right
                })
                var bigLeft = $(".mg-big").width() * left / $(".mg-mask").width()
                var bigTop = $(".mg-big").height() * right / $(".mg-mask").height()
                $(".mg-big").css({
                    backgroundPositionX: -bigLeft,
                    backgroundPositionY: -bigTop
                })
            })
        }
        this.move = function () {
            $(".mg-img").on("mouseover", function (e) {
                $(".mg-big").show();
                $(".mg-mask").show();
            })
        }
        this.out = function () {
            $(".mg-img").on("mouseout", function (e) {
                $(".mg-big").hide();
                $(".mg-mask").hide();
            })
        }
        //点击右边的列表改变mg-img里面的图片
        this.click = function () {
            var that = this;
            $(".mg-list").on("click", "li", function () {
                $(this).css({
                    border: "2px solid #b4a078"
                })
                $(this).siblings().css({
                    border: " 1px solid #e8e8e8"
                })
                $(".mg-big").css({
                    backgroundImage: `url(${$(this).children("img").prop("src")})`
                })
                $(".mg-img img").prop("src", $(this).children("img").prop("src"))
                that.mouseover();
                that.move();
                that.out();
            })
            $(".in-colour img").on("click", function () {
                $(this).css({
                    border: "1px solid red"
                })
                $(this).siblings("img").css({
                    border: "1px solid #c8c9cd"
                })
                $(".mg-img img").prop("src", $(this).prop("src"));
                $(".mg-big").css({
                    backgroundImage: `url(${$(this).prop("src")})`
                })
            })
            $(".in-colour img").on("mouseover", function () {
                $(this).css({
                    border: "1px solid red"
                }).siblings("img").css({
                    border: "1px solid #c8c9cd"
                })
            })
            $(".in-colour img").on("mouseout", function () {
                $(this).css({
                    border: "1px solid #c8c9cd"
                })
            })

        }
    }
    let m = new Magnifier();
    m.eventBind();
</script>